<template>
  <eg-transition :enter="enter" :leave="leave" :duration="1000">
    <div class="eg-slide" v-if='active' style="width:100%;height:100%">
      <div class="eg-slide-content" style="width:100%;height:100%">
             <grid-layout class="gridlayout"
                       :layout.sync="layoutItem.SlideContent"
                       :col-num="18"
                       :row-height="slideRowHeight"
                       :is-draggable="false"
                       :is-resizable="false"
                       :vertical-compact="false"
                       :preventCollision="false"
                       :margin="[0, 0]"
                       :use-css-transforms="false"
                       style="height:100%">
             <grid-item v-for="item in layoutItem.SlideContent" class="insideGridShow"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i"
              :key="item.i">
              <eg-transition :enter='item.itemAnimation.enter' :leave='item.itemAnimation.leave'>
              <div class="insideContent"
                  style="width:100%;height:100%"
                  v-bind:style="{ 'border-width': item.itemBorder.width  + 'px', 'border-style': item.itemBorder.type, 'border-color': item.itemBorder.color, 'border-radius': item.itemBorder.radius + 'px', 'box-sizing': 'border-box' }"
                  v-show="step >= item.itemAnimation.order ">
                <show :itemContent="item.itemContent"></show>
              </div>
              </eg-transition>
             </grid-item>
          </grid-layout>
      </div>
    </div>
  </eg-transition>
</template>

<script>
// v-show="step >= item.itemAnimation.order "
import { Slide } from 'eagle.js'
import Show from '@/components/Show/Show.vue'

export default {
  mixins: [Slide],
  props: {
    layoutItem: Object
  },
  data () {
    return {
      height: 200
    }
  },
  components: {
    Show
  },
  methods: {
    getHeight () {
      this.height = window.innerHeight
    }
  },
  created () {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  destroyed () {
    window.removeEventListener('resize', this.getHeight)
  },
  computed: {
    sortLayout () {
      return JSON.parse(JSON.stringify(this.$store.getters.sortLayout))
    },
    getBackground () {
      return this.$store.getters.getBackground
    },
    slideRowHeight () {
      return this.height / 18
    }
  }
}
</script>
